<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>日志管理</title>
</head>
<body>
<div id="organizationManage" class="organizationManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="访问日志" name="first"></el-tab-pane>
      <el-tab-pane label="操作日志" name="second"></el-tab-pane>
    </el-tabs>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm">
              <el-form-item label="日志内容:" label-width="55px">
        				<el-input v-model="content" placeholder="日志内容"></el-input>
              </el-form-item>
              <el-form-item label="请选择:" label-width="75px" style="margin-right: 10px;">
      					<el-select v-model="queryType" placeholder="请选择" clearable>
      				    <el-option
      				      v-for="item in options"
      				      :key="item.value"
      				      :label="item.label"
      				      :value="item.value">
      				    </el-option>
      					</el-select>
              </el-form-item>
              <el-form-item label="">
      					<el-input v-model="searchContent" placeholder="请输入查询内容"></el-input>
              </el-form-item> 
              <el-form-item label="操作时间:" label-width="75px">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="beginTime" type="datetime" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="—" class="widthauto">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="datetime" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <!-- <div class="mainSearchBtnBox"> -->
                  <el-form-item label="">
                      <el-button icon="el-icon-search" type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
                  </el-form-item>
                  <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
              <!-- </div> -->
            </el-form>
        </div>
        <el-row>
          <el-table 
              ref="multipleTable"
              tooltip-effect="dark"
              empty-text="无数据"
              style="width: 100%"
              border
              :data="dataTable"
              >
              <el-table-column align="center" type="index" prop="name" label="序号" width="55"></el-table-column>
               <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
              <el-table-column align="center" prop="userName" label="登录名称"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="phone" label="登录手机号"></el-table-column>
              <el-table-column align="center" prop="remoteIP" label="登录IP"></el-table-column>
              <el-table-column align="center" prop="content" label="日志内容"></el-table-column>
              <el-table-column align="center" prop="reqStartTime" label="操作时间"></el-table-column>
          </el-table>
          <table-pagination :pager="pager"  @change="queryLogDataList"></table-pagination>
        </el-row>
    </div>
</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var orgData=[[${orgData}]];
	var beginTime = [[${beginTime}]];
	var endTime = [[${endTime}]];
   var orgVM =  new Vue({
        el: '#organizationManage',
        data: {
            	activeName: 'first',
            	beginTime:beginTime,
            	endTime:endTime,
            	queryType:"1",
            	content:"",
            	searchContent:"",
                dataTree: orgData,//组织结构tree
                dataTable:[],
                multipleSelection: [],
                dialogFormVisible: false,
                options: [{
                	value: '1',
                    label: '登录名称'	
                	},
                	{
                   	value: '2',
                    label: '姓名'	
                   	},
                	{
                        value: '3',
                        label: '手机号'	
                        }
                ],
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
             
        },
        methods: {
        	search(){
        		this.pager.currentPage = 1;
        		this.queryLogDataList()
        	},
        	queryLogDataList(){//查询按钮
            	  var param = {}; 
            	  var pageSize = this.pager.pageSize;
                  var pageNum = this.pager.currentPage;
                  param.pageNum = pageNum;
                  param.pageSize = pageSize;
                  param.beginTime=this.beginTime;
                  param.endTime=this.endTime;
                  param.content=this.content;
                  param.queryType=this.queryType;
                  param.searchContent=this.searchContent;
                  param.visitType = 1;
                  if(this.beginTime !=null && this.beginTime != '' && this.endTime !=null && this.endTime != '' && this.beginTime>this.endTime){
                	  this.$message("开始时间不能大于结束时间");
           	         return;
                  }
                  console.log(param);
                  axios.post('/log/log/queryLogDataList',param).then(function (response) {
                  	  console.log(response);
                             if(null===response||response.data==null||response.data.code!='0'){
                          	  alert(response.data.message);
                          	  return ;
                             }else{
                            	 orgVM.dataTable =response.data.data.data; 
                            	 orgVM.pager.currentPage= response.data.data.currentPage;
                            	 orgVM.pager.total= response.data.data.total;
                             }
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              } ,
              handleClick(tab, event) {
                if(tab.name=='first'){
                	window.location.href="/log/log/visitLog";
                }else{
                	window.location.href="/log/log/operationLog";
                }
              },
        },
        created(){
          var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
          if(localVal){this.pager.pageSize = localVal;}
        	this.queryLogDataList();
        },//created方法 结束
        mounted(){
            document.getElementById('organizationManage').style.display = 'block';
        }
    })
</script>
</html>